<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="../css/userShow.css"/>
</head>
<body>
<div id="app">
    <div class="top">
        <el-form :inline="true" class="demo-form-inline" style="padding: 35px 0px">
             <el-form-item label="用户名" style="padding-left: 20px">
                <el-input placeholder="用户名" v-model="user.uname"></el-input> </el-form-item>
            <el-form-item label="邮箱" style="padding-left: 20px">
                <el-input placeholder="邮箱" v-model="user.email"></el-input> </el-form-item>
            <el-form-item label="电话号码" style="padding-left: 20px">
                <el-input placeholder="电话号码" v-model="user.phone"></el-input> </el-form-item>
            <el-form-item label="用户类别">
                <el-select v-model="user.status" placeholder="请选择"  >
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button type="primary" @click="add">添加</el-button>
                <el-button type="primary" @click="empty">清空</el-button>
            </el-form-item> </el-form>
    </div>
    <div class="bottom">
        <!--表格-->
        <el-table
                :data="userinfo"
                style="width: 100% ;margin: 10px 160px;font-size: 15px">
            <el-table-column
                    prop="usid"
                    label="序号"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="uname"
                    label="姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号码"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="descript"
                    label="简介"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="photo"
                    label="头像"
                    width="200">
                <template slot-scope="scope" style="width: 200px; height: 100px;">
                    <img  :src=`../../${scope.row.photo}` alt="" style="width: 150px; height: 75px;object-fit: revert">
                </template>
            </el-table-column>
            <el-table-column
                    prop="balance"
                    label="余额"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                <template slot-scope="scope" style="width: 200px; height: 100px;">
                    <span style="width: 300px;">{{ scope.row.status == 0 ? "用户" : scope.row.status == 1 ? "管理员" : "已封禁"}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popconfirm
                            title="你确定要封禁该用户？"
                            @confirm="banned(scope.row)"
                    >
                        <el-button type="danger" slot="reference">封禁</el-button>
                    </el-popconfirm>
                    <el-popconfirm
                            title="你确定要解封该用户？"
                            @confirm="delBanned(scope.row)"
                    >
                        <el-button slot="reference">解封</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-left: 700px">
            <el-pagination
                    layout="prev, pager, next"
                    :page-size="page.size"
                    @current-change="changPage"
                    :total="page.total">
            </el-pagination>
        </div>
<!--        弹框-->
        <el-dialog
                title="提示"
                :visible.sync="centerDialogVisible"
                width="30%"
                center>
            <span>需要注意的是内容是默认不居中的</span>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            user:{uname:'',email:'',phone:'',status:''},
            userinfo:'',
            page:{page:1,size:6,total:0},
            centerDialogVisible: false,
            options: [{
                value: '1',
                label: '管理员'
            }, {
                value: '0',
                label: '用户'
            }],
        },
        methods:{
            //用户查询
            selectUser(){
                axios.post(`../../user/userinfo/selectUser?page=${this.page.page}&size=${this.page.size}`,this.user).then(res=>{
                    this.userinfo=res.data.data.records;
                    this.page.total=res.data.data.total;
                })
            },
            //分页查询
            changPage(page){

              //  window.location.reload();

                this.page.page=page;
                this.selectUser();
            },

            //清空
            empty(){
                this.user={uname:'',email:'',phone:'',status:''}
            },
            //查询
            query(){
               this.page.page=1;
               this.selectUser();
            },
            //添加用户
            add(){
                axios.post("../../user/userinfo/addUser",this.user).then(res=>{
                   if(res.data.code==-1){
                       this.$message.error(res.data.message);
                   }else if(res.data.code==1){
                       this.$message.success(res.data.message);
                       this.empty();
                   }
                })
            },
            //封禁用户
            banned(row){
               if(row.status==-2){
                   return;
               }
                axios.get(`../../user/userinfo/bannedUser?usid=${row.usid}&status=${-2}`).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message);
                        this.selectUser();
                    }
                })
            },
            //解封
            delBanned(row){
               if(row.status!=-2){
                   return;
               }
                axios.get(`../../user/userinfo/bannedUser?usid=${row.usid}&status=${0}`).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message);
                        this.selectUser();
                    }
                })
            }
        },
        created(){
            this.selectUser();
        }
    })
</script>
</body>
</html>